<template>
	<view class="mainpadding">
		<textarea class="textarea" :placeholder="$t('dt.fxgdxq')" maxlength="-1" v-model="content"></textarea>
		<view class="flexleft flex_wrap">
			<view class="flexcenter tpbox " v-for="(item,index) in images" :key="index">
				<view class="tjtp">
					<image class="" :src="item" mode=""></image>
					<view class="deleteimg" @click="deleteimg(index,images)"></view>
				</view>
			</view>
			<view class="flexcenter tpbox " v-if="images.length<3" @click="uploadImg(3,images)">
				<image class="tjtp" src="@/static/image/system/tjtp.png" mode=""></image>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding" @click="submit">
			<view class="bigbtn">{{$t('editinfo.tj')}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				images: [],
				content: "",
				categoryId: '',
				noteId:""
			}
		},
		onLoad(options) {
			let that = this
			this.categoryId = options.id 
			if(options.noteId){
				this.noteId = options.noteId
				uni.setNavigationBarTitle({
					title:that.$t('dt.bjdt')
				})
				this.getDetail()
			}
		},
		
		methods: {
			getDetail(){
				httpRequest.request('/api/v1/note/user/detail', 'GET', {
					noteId:this.noteId
				}).then(res => {
					this.content = res.data.content
					this.images = res.data.image!=""?res.data.image.split(','):[]
				})
			},
			submit() {
				if (this.content == "") {
					httpRequest.toast(this.$t('dt.qsrdtnr'))
					return false
				}
				let url = "/api/v1/note/add"
				let data = {
					content: this.content,
					categoryId: this.categoryId,
					image: this.images.join(),
				}
				if(this.noteId){
					url = "/api/v1/note/update"
					this.$set(data,"id",this.noteId)
				}
				let that = this
				uni.showLoading({
					mask: true,
					title:"Loading"
				})
				httpRequest.request(url, 'POST', data).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			deleteimg(index, upImgs, upImgs_text) {
				upImgs.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				let num = 1
				if (value > 2) {
					num = Number(value) - upImgs.length;
					this.upnum = num
					if (num <= 0) {
						return false;
					}
				}
				uni.showActionSheet({
					itemList: [_this.$t('system.xj'), _this.$t('system.xc')],
					success: function(res) {
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(this.upnum, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						} else {
							httpRequest.chooseImage(this.upnum, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/v1/index/upload', url).then(res => {
					let image_item = res.fullurl;
					this.images.push(res.url)
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tpbox {
		width: 33.33%;
		margin-top: 30rpx;
	}

	.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}

	.textarea {
		width: 100%;
		box-sizing: border-box;
		height: 600rpx;
	}

	.textarea1 {
		width: 100%;
		box-sizing: border-box;
		height: 200rpx;
	}
</style>